<template>
	<div :id="echId" style="pointer-events: all;"></div>
</template>

<script>
/*
echId: echart图dom的id，必须保证整个项目内的次id不会重复
echData: echart图的数据，必须有的label（标题）和value（数据）
unit: 数据的单位
*/
export default {
	props: {
		echId: {
			type: String
		},
		echData: {
			type: Array,
			default: () => {
				return [];
			}
		},
		unit: {
			type: String,
			default: '个'
		}
	},
	computed: {
		labelArr() {
			var arr = [];
			for (var i = 0; i < this.echData.length; i++) {
				arr.push(this.echData[i].label);
			}
			return arr;
		},
		dataArr() {
			var arr = [];
			for (var i = 0; i < this.echData.length; i++) {
				arr.push({
					value: this.echData[i].value,
					name: this.echData[i].label
				});
			}
			return arr;
		}
	},
	data() {
		return {
			jishiqi_defen: null
		};
	},
	watch: {
		echId: {
			handler(val) {
				if (val !== null && val !== undefined && val !== '') {
					setTimeout(() => {
						this.init();
					}, 100);
				}
			},
			immediate: true
		}
	},
	methods: {
		init() {
			var myChart = this.$echarts.init(document.getElementById(this.echId));
			var option = {
				color: ['#7dff3799', '#24b6ff99'],
				grid: {
					top: '30px',
					left: '35px',
					right: '25px',
					bottom: '23px'
				},
				legend: {
					data: ['今日出勤', '总人数'],
					textStyle: {
						color: "#fff",
						fontSize: 5
					}
				},
				tooltip: {
					
					trigger: 'axis',
					axisPointer: {
						// 坐标轴指示器，坐标轴触发有效
						type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
					},
				},
				lineStyle: {
					color: 'rgba(36, 182, 255, 0.7)'
				},
				toolbox: {
					show: true,
					feature: {
						dataView: { show: true, readOnly: false },
						magicType: { show: true, type: ['line', 'bar'] },
						restore: { show: true },
						saveAsImage: { show: true }
					}
				},
				calculable: true,
				xAxis: [
					{
						type: 'category',
						data: ['木工班组', '钢筋班组', '管理班组', '塔吊班组', '水电班组', 'CI班组', '外架班组', '土方班组'],
						splitLine: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							textStyle: {
								//数值样式
								color: '#04e1fb',
								fontSize: 5
							}
						}
					}
				],
				yAxis: [
					{
						type: 'value',
						minInterval: 1,
						splitLine: {
							show: false
						},
						axisLine: {
							show: false
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							textStyle: {
								//数值样式
								color: '#04e1fb',
								fontSize: 7
							},
							formatter: e => {
								if (e === 0) {
									return '';
								} else {
									return e;
								}
							}
						}
					}
				],
				series: [
					{
						name: '今日出勤',
						type: 'bar',
						data: [2, 4, 7, 23, 25, 76, 135, 162],
						markPoint: {
							data: [{ type: 'max', name: '最大值' }, { type: 'min', name: '最小值' }]
						},
						markLine: {
							data: [{ type: 'average', name: '平均值' }]
						},
					},
					{
						name: '总人数',
						type: 'bar',
						data: [2, 5, 9, 26, 28, 70, 175, 182],
						markPoint: {
							data: [{ name: '年最高', value: 182, xAxis: 7, yAxis: 183 }, { name: '年最低', value: 2, xAxis: 11, yAxis: 3 }]
						},
						markLine: {
							data: [{ type: 'average', name: '平均值' }]
						},
					}
				]
			};
			myChart.setOption(option);
			this.jishiqi(myChart, option);
		},
		jishiqi(myChart, option) {
			let index = 1;
			var masLength = option.series.length > 0 ? option.series[0].data.length : 0;
			myChart.dispatchAction({
				type: 'highlight',
				seriesIndex: 0,
				dataIndex: 0
			});

			this.jishiqi_defen = setInterval(() => {
				for (var i = 0; i < masLength; i++) {
					myChart.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: i
					});
				}

				myChart.dispatchAction({
					type: 'highlight',
					seriesIndex: 0,
					dataIndex: index
				});
				if (index < masLength - 1) {
					index++;
				} else {
					index = 0;
				}
			}, 2000);
			document.getElementById(this.echId).addEventListener('mouseover', () => {
				for (var i = 0; i < masLength; i++) {
					myChart.dispatchAction({
						type: 'downplay',
						seriesIndex: 0,
						dataIndex: i
					});
				}
				clearInterval(this.jishiqi_defen);
				this.jishiqi_defen = null;
			});
			document.getElementById(this.echId).addEventListener('mouseout', () => {
				this.jishiqi_defen = setInterval(() => {
					for (var i = 0; i < masLength; i++) {
						myChart.dispatchAction({
							type: 'downplay',
							seriesIndex: 0,
							dataIndex: i
						});
					}

					myChart.dispatchAction({
						type: 'highlight',
						seriesIndex: 0,
						dataIndex: index
					});
					if (index < masLength - 1) {
						index++;
					} else {
						index = 0;
					}
				}, 2000);
			});
		}
	}
};
</script>

<style></style>
